<template>
  <div class="postList">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item
        ><a href="javascript:;">文章管理</a></el-breadcrumb-item
      >
      <el-breadcrumb-item>文章列表</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="container">
      <el-card class="box-card">
        <el-table
          ref="singleTable"
          :data="postList"
          highlight-current-row
          @current-change="handleCurrentChange"
          style="width: 100%"
        >
          <el-table-column type="index" width="50"> </el-table-column>
          <el-table-column prop="title" label="标题" width="500">
          </el-table-column>
          <el-table-column prop="type" label="类型" width="100">
            <!-- 作用域插槽 -->
            <template slot-scope="scope">
              {{ scope.row.type == 1 ? "文章" : "视频" }}
            </template>
          </el-table-column>
          <el-table-column prop="user.nickname" label="作者" width="150">
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[4, 8, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getpostList } from "@/apis/post.js";
export default {
  data() {
    return {
      postList: [],
      currentPage: 1, // 当前页
      total: 0,
      pageSize: 4, //每页显示条数
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      let res = await getpostList({
        pageIndex: this.currentPage,
        pageSize: this.pageSize,
      });
      console.log("新闻列表", res);
      if (res.status == 200) {
        // res.data.data = res.data.data.map((item) => {
        //   item.type = item.type == "1" ? "文章" : "视频";
        //   return item;
        // });
        this.postList = res.data.data;
        this.total = res.data.total;
      }
    },
    handleCurrentChange() {},
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.init();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.init();
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  margin-top: 20px;
}
.el-pagination {
  margin: 40px auto;
  text-align: center;
}
</style>